Angular CLI tutorial

What is Angular CLI

The Angular CLI is a command-line tool that allows us to create, develop, scaffold, and manage Angular applications from a command shell.

Angular CLI takes care of the time-consuming and error-prone task of creating and configuring the initial application. It also helps us quickly add new components, directives, and modules.

Using Angular CLI, you can

1. Create a new Angular Project using a single command with all the initial default configurations. It sets up the Routes, type of style sheets to be used, whether to use stand alone components etc at the time of creation of the Project.
2. We can add Components, Directives, Pipes, Services & Modules etc to it using few commands.
3. It helps us to compile and build the application for distribution.
4. It also has a development server, which helps us run, test and debug the application during the development phase. A single command (“ng serve“) compiles our application, starts a web server, and runs our application.

Angular Vs. Angular CLI

Angular is a complete framework that helps build single-page client applications. It consists of core functionalities that you need to develop a client application. It contains various libraries and tools to help us do that.

Angular CLI is just a command-line tool. It contains lots of commands that make it easier to work with the Angular framework.

For example, using the command “ng new,” we can create a new Angular project within a few minutes.

How to Install Angular CLI

We install the Angular CLI using the following npm command.

                              

npm install -g @angular/cli@latest
                            
                        

The above command installs the latest version of Angular CLI on your machine. Note that we have used the -g flag (which stands for global) to install the Angular CLI system-wide so you can use it in all projects.

Angular CLI Versions

Since Angular Version 6, the Angular CLI follows the same Version No as the Angular. Hence for Angular 7, the corresponding version of the Angular CLI is 7.

The Angular CLI version 1.7 was for Angular 5, and Angular CLI 1.4 was for Angular 4

You can keep track of the latest Angular CLI release from Angular CLI release information.

Angular CLI Version Check

You can find out the Current Installed Angular CLI Version by Using the Command

                              

ng --version
                            
                        

The latest version as of writing this article is 7.0.6. The command above also gives the version of the node installed in your system.

Angular CLI Commands

Getting Help

                              
 
ng help
 
                            
                        

Getting help on individual commands us the syntax ng [command name] --help. For Example

                              

ng add --help       //help on add command
ng new --help       //help on new command  
 
                            
                        

Creating the Application with ng new

The ng new command is used to create new folder and creates an App with the provided name.

                              

ng new 
 
                            
                        

The command will ask you

1. What name would you like to use for the project?
   Enter the name of the project here. “GettingStarted”
2. Would you like to add Angular Routing?
   Answer this as Yes unless you do not want to add Angular Routing.
3. Which stylesheet format would you like to use?
   You arrow keys to select the available options from CSS, SCSS, SASS, LESS, and Stylus

The above command will create a folder GettingStarted and copies all the required dependencies and configuration settings. The Angular CLI does the following

1. Creates a new directory GettingStarted is created
2. Downloads and installs Angular libraries and any other dependencies
3. Installs and configures TypeScript.
4. Installs and configures Karma & Protractor for testing
5. Initialises the Git.

Running the Application

To run the application cd into the folder and run either ng server or use npm start (which runs the ng serve behind the scene)

                              

cd gettingStarted
ng serve         // or npm start  
                            
                        

Now open the browser and enter the URL http://localhost:4200/ and you should be able to see Welcome to GettingStarted! Message

You can stop the app by pressing ctrl-c

ng new options

ng new example

                              
 
//creates with new project with Style CSS
ng new gettingStarted --routing  --style CSS
 
//creates the new project with HelloWorld_root as the selector
ng new HelloWorld --routing  --style CSS -p HelloWorld
 
                            
                        

ng generate

                              

ng generate <schematic> [options]
ng g <schematic> [options]
                            
                        

ng generate or (ng g) is used to generate components , module , class , pipes & directives , etc. The following tables show the list of artifacts that can be generated.

Common options

Component

The following command generates the component.

ng g component <name> [options]

Examples

ng g component Hello

The above command does the following

1. Creates the Hello folder under the src/app folder
2. Create the HelloComponent along with CSS, Spec & Template file under the Hello folder
3. Imports the HelloComponent in the root module and adds it to the declarations array
4. The CSS selector use the format app-<name>. i.e app-hello

ng g component --flat Hello does not create the hello folder. The component is created in the src/app folder.

ng g component --flat hello/hello creates the component under src/app/hello folder

ng g component --export hello adds the component to the exports metadata array of the module.

ng g component --prefix=myapp hello uses the CSS selector as myapp-hello.

ng g component --selector=hi --force hello uses the selector as hi

generate component inside module

ng g module account generates the code for account module

ng g component --module=account account/hello adds the component to the account module

The following is the list of all available options

Directive

ng g directive <name> [options] is used to generate the directive. For Example ng g directive Some generates the Some.Directive.ts. The following code is generated. It also generates the some.directive.spec.ts

                              

import { Directive } from '@angular/core';
 
@Directive({
  selector: '[appSome]'
})
export class SomeDirective {
 
  constructor() { }
 
}
 
                            
                        

The above command does not create the folder. You can use the ng g directive directive/Some, which will create the directive under the folder directive.

You can use the command ng g directive --flat=false Some, which will create the directive under the folder Some (folder name is same as the directive name)

You can use the --force flag to force overwriting of the files, if the files already exists

Use the--module flag to add the directive to a module other than the root module.

Use the --prefix or --selector flag to change the CSS Selctor.

You can use the --export & --skipImport to add the directive to exports and imports metadata of the module

The following is the complete list of available options

Pipe

ng generate pipe <name> [options] is used to generate the pipe. For Example, ng g pipe Date generates the date.pipe.ts. The following code is generated. It also generates the date.pipe.ts.spec.ts

                              

import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({
  name: 'date'
})
export class DatePipe implements PipeTransform {
 
  transform(value: any, args?: any): any {
    return null;
  }
 
}
 
                            
                        

The above command does not create the folder. You can use the ng g pipe pipes/Date, which will create the pipe under the folder pipes.

You can use the command ng g pipe --flat=false Date, which will create the pipe under the folder Date (folder name is the same as the pipe name)

You can use the --force flag to force overwriting of the files, if the files already exists

Use the--module flag to add the pipe to a module other than the root module.

You can use the --export & --skipImport to add the directive to exports and imports metadata of the module

Use the--module flag to add the pipe to a module other than the root module.

The following is the complete list of available options

Service

ng generate service <name> [options] is used to generate the service. For Example ng g service Data generates the data.service.ts & data.service.ts.spec.ts. The following is the sample code generated by the command

                              

import { Injectable } from '@angular/core';
 
@Injectable({
  providedIn: 'root'
})
export class DataService {
 
  constructor() { }
}
 
                            
                        

The above command does not create the folder. You can use the ng g service services/Data, which will create the service under the folder services.

You can use the command ng g service --flat=false Data, which will create the service under the folder Data (folder name is same as the service name)

class

ng generate class <name> [options] is used to generate the class. For Example ng g class customer generates the customer.ts in the current folder. The following is the sample code generated by the command

                              

export class Customer {
}
                            
                        

Use the command ng g class class/customer to create the class under the class folder.

Module

use the ng g module <name> [options] command to generate the module. For Example ng g module account generates the account module under the folder src/app/account. The following code is generated

                              

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
 
@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class AccountModule { }
                            
                        

ng g module account --module=app generates the account module and adds it to the imports metadata array of AppModule

ng g module account --routing=true --force. The --force flag overwrites the previously generated files. The --routing=true also creates the account-routing.module. The routes are registered with the forChild(routes)

ng g module account --force --routing=true --routingScope=Root registers the routes with the forRoot(routes)

Adding Components, Pipes, Directives to module

You can add component, directive, pipe & services to module by using the flag --module=[ModuleName] and naming the component as [ModuleName]/[ComponentnNme].

For Example, The following commands creates the account module and adds the HelloComponent, SomeDirective, DataSerivce & DatePipe to the module

                              

ng g module account
ng g component --module=account account/hello
ng g directive --module=account --flat=false account/Some
ng g service --module=account --flat=false account/Data
ng g pipe --module=account --flat=false account/Date
 
                            
                        

The following is the list of all the available options

ng update

The ng update command updates or upgrades the angular application and its dependencies to the latest version. Click on how to upgrade Angular to latest version for more information

Resources

Summary

The Angular CLI helps to increase productivity by helping us to quickly create the app and add the component, pipes, services & directives, etc to the module. The Angular CLI has a lot more commands like serve, build, test, lint, e2e etc, which help us to build and distribute the applications. We will cover those in one of the future tutorials.